<!-- #layout name=empty -->
<div class="container" id="app">
  <div class="row">
    <div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
      <div class="block-small-form">
        <div class="logo">
          <img src="/_Admin/Images/logo-blue.png" alt="Logo" />
        </div>
        <kb-form :model="model" :rules="rules" ref="form">
          <kb-form-item prop="email">
            <label class="sr-only">Email</label>
            <input
              class="form-control"
              type="text"
              placeholder="Email address"
              v-model="model.email"
            />
          </kb-form-item>
          <kb-form-item>
            <p class="form-control-static">{{
              Kooboo.text.account.sendResetEmailTip
            }}</p>
          </kb-form-item>
          <kb-form-item>
            <a
              class="btn gray pull-left"
              :href="Kooboo.Route.Get(Kooboo.Route.User.LoginPage)"
              >Back</a
            >
            <button class="btn blue pull-right" type="submit" @click="onSubmit"
              >Submit</button
            >
          </kb-form-item>
        </kb-form>
      </div>
    </div>
  </div>
</div>

<script src="/_Admin/Scripts/components/kbForm.js"></script>

<script>
  new Vue({
    el: "#app",
    data: function() {
      return {
        model: {
          email: ""
        },
        rules: {
          email: [
            { required: Kooboo.text.validation.required },
            {
              pattern: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
              message: Kooboo.text.validation.emailInvalid
            }
          ]
        }
      };
    },
    methods: {
      onSubmit: function() {
        if (this.$refs.form.validate()) {
          Kooboo.User.ForgotPassword(this.model).then(function(res) {
            if (res.success) {
              window.info.show(res.model, true);
            }
          });
        }
      }
    }
  });
</script>